<template>
	<swiper-item >
		<view class="swiper-item" id="content-wrap0">
			<view class="content" v-for="item in 10">
				<view class="avatar">
					<up-avatar :src="src"></up-avatar>
				</view>
				<view class="contentLeft">
					<view class="singerName">
						歌曲名
					</view>
					<view class="song">
						歌手
					</view>
					<view class="iconfont icon-24gl-play triangle" ></view>
				</view>
			</view>
		</view>
	</swiper-item>
</template>

<script>
	
	export default {
		components:{
			// playMusic
		},
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				text: '无头像'
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		width: 750rpx;
		padding-bottom: 80px;
		// overflow: hidden;
		.content {
			width: 90%;
			margin: 0 auto;
			display: flex;
			position: relative;
			padding-top: 30rpx;

			.avatar {
				width: 92rpx;
				height: 92rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.contentLeft {
				width: 600rpx;
				margin-left: 28rpx;
				border-bottom: 1rpx solid $app-text-color-20;

				.singerName {
					color: $app-text-color-80;
					font-size: 26rpx;
					margin-top: 10rpx;
					font-weight: 400;
					
				}

				.song {
					color: $app-text-color-40;
					font-size: 22rpx;
					margin-top: 10rpx;
					font-weight: 400;
				}
			}

			.triangle {
				font-size: 40rpx;
				// border-style: solid;
				// border-color: transparent;
				// border-width: 15rpx 0 15rpx 20rpx;
				// border-left-color: rgba(217, 81, 157, 1);
				position: absolute;
				right: 20rpx;
				top: 50rpx;
				color: $app-text-color;
               &:active{
				   opacity: 0.8;
			   }
			}
		}

	}
</style>